<style>
    /* 计算项下拉菜单样式 */
    .calculation-menu {
        display: none; /* 初始状态下隐藏下拉菜单 */
        position: absolute;
        z-index: 1000;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        padding: 10px;
        min-width: 200px;
        right: 0;
        top: 100%; /* 下拉菜单显示在按钮下方 */
    }

    /* 网格布局 */
    .calculation-menu.grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 将下拉菜单分成三列 */
        grid-gap: 10px; /* 列之间的间隔 */
    }

    .submitForm {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #ECF0F1;
        padding: 10px;
        border-top: 1px solid #ccc;
        box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
        z-index: 1000;
    }
    .dropdown-menu {
        height: 250px;
        /*height: 250px;*/
        /*max-height: calc( 100vh - 100px );*/
        overflow-y: auto;
    }

</style>
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div id="app" style="margin-bottom: 80px;">
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Template_name')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-template_name" class="form-control" data-rule="required" name="row[template_name]" v-model="templateName" type="text" value="">
            </div>
        </div>
<!--        <div class="form-group">-->
<!--            <label class="control-label col-xs-12 col-sm-2">{:__('Staff_type')}:</label>-->
<!--            <div class="col-xs-12 col-sm-8">-->
<!--                <div id="staff_type" class="radio" data-rule="required">-->
<!--                    <label v-for="(vo, key) in staffTypes" :key="key">-->
<!--                        <input-->
<!--                                name="row[staff_type]"-->
<!--                                type="radio"-->
<!--                                :value="key"-->
<!--                                v-model="selectedStaffType"-->
<!--                                @change="updateDropdownOptions(selectedStaffType)"-->
<!--                        > {{ vo }}-->
<!--                    </label>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2"></label>
            <div class="col-xs-12 col-sm-8">
                <button type="button" class="btn btn-primary" @click="addNewForm">追加计算项目</button>
            </div>
        </div>
        <div id="tableContainer">
            <div class="form-group" v-for="(form, index) in calculationForms" :key="index">
                <label class="control-label col-xs-12 col-sm-2"></label>
                <div style="border-bottom: 1px solid black;" class="col-xs-12 col-sm-8"  >
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">项目名称:</label>
                        <div class="col-xs-12 col-sm-8">
                            <input class="form-control"  data-rule="required" name="row[name][item_name][]" type="text" v-model="form.itemName">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">类型:</label>
                        <div class="col-xs-12 col-sm-8">
                            <select class="form-control" v-model="form.itemType"  name="row[name][item_type][]">
                                <option v-for="(type, key) in itemTypes" :value="key">{{ type }}</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-xs-12 col-sm-8" style="margin-left: 17%">
                            <div class="button-group dropdown">
                                <button type="button" class="btn btn-primary dropdown-toggle" @click="toggleDropdown(index, 'showDropdownMenu');" data-toggle="dropdown" data-display="static" aria-expanded="false">
                                    计算项
                                </button>
                                <div class="dropdown-menu calculation-menu grid" v-show="form.showDropdownMenu">
                                    <a
                                            class="dropdown-item"
                                            href="#"
                                            v-for="option in formDropdownOptions"
                                            :value="option.identifying"
                                    @click="selectDropdownItem(option.identifying,option.title, form,$event)"
                                    >{{ option.title }}</a>
                                </div>

                                <button type="button" class="btn btn-primary dropdown-toggle" @click="toggleDropdown(index, 'showCalculatedWay')" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    计算项方式
                                </button>
                                <div class="dropdown-menu calculation-menu grid" v-show="form.showCalculatedWay">
                                    <a class="dropdown-item" href="#" @click="selectCalculatedWayItem('+', form,$event)">+</a>
                                    <a class="dropdown-item" href="#" @click="selectCalculatedWayItem('-', form,$event)">-</a>
                                    <a class="dropdown-item" href="#" @click="selectCalculatedWayItem('*', form,$event)">*</a>
                                    <a class="dropdown-item" href="#" @click="selectCalculatedWayItem('/', form,$event)">/</a>
                                    <a class="dropdown-item" href="#" @click="selectCalculatedWayItem('(', form,$event)">(</a>
                                    <a class="dropdown-item" href="#" @click="selectCalculatedWayItem(')', form,$event)">)</a>
                                </div>
                                <input
                                        id="c-showCustomValue"
                                        step="0.01"
                                        class="form-control"
                                        type="number"
                                        v-model="form.customValue"
                                        style="width: 120px"
                                >
                                <button
                                        type="button"
                                        class="btn btn-success btn-sm"
                                        @click="confirmCustomValue(form, $event)"
                                >
                                    自定义数字确认
                                </button>
                                <button type="button" class="btn btn-danger btn-sm" @click="removeLastItem(index)">
                                    移除最新项
                                </button>
                            </div>

                        </div>
                    </div>

                    <div class="form-group">
                      <label class="control-label col-xs-12 col-sm-2">计算公式:</label>
                        <div class="col-xs-12 col-sm-8">
                          <textarea id="c-calculated_formula" v-model="form.calculatedFormula" rows="6" readonly class="form-control"  type="text"></textarea>
                          <input type="hidden" v-model="form.calculatedFormulaValue" name="row[name][formula][]">
                        </div>
                    </div>

                    <div class="form-group" style="float: right;width: 176px">
                        <label class="control-label col-xs-12 col-sm-2"></label>
                        <div class="col-xs-12 col-sm-8" style="width: 200px">
                            <button type="button" class="btn btn-primary" @click="addNewForm">追加计算项目</button>
                            <button type="button" class="btn btn-danger" @click="removeForm(index)">删除</button>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="submitForm">
            <label class="control-label col-xs-12 col-sm-2"></label>
            <div class="col-xs-12 col-sm-8 text-center">
                <button type="button" style="float: left" class="btn btn-primary" @click="submitForm">提交</button>
            </div>
        </div>
    </div>

</form>
